<template>
    <el-menu
            :default-active="currentPath"
            class="el-menu-admin"
            router
            mode="vertical"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            :collapse="isCollapse">
        <div style="height: 80px;"></div>
        <!--index 没有用但是必需字段-->
        <el-sub-menu v-for="(item,i) in adminMenus" :key="i" :index="(i).toString()" style="text-align: left">
            <template #title>
                <el-icon><component  :is="item.iconCls"></component></el-icon>
                <span>{{ item.nameZh }}</span>
            </template>
<!--        slot="title"    -->
<!--        <span  style="font-size: 17px;">-->
<!--          <i :class="item.iconCls"></i>-->
<!--        </span>-->
            <el-menu-item v-for="child in item.children" :key="child.path" :index="child.path">
<!--                <i :class="child.icon"></i>-->
                <template #title>
                    <component  :is="child.iconCls"></component>
                   <span> {{ child.nameZh }}</span>
                </template>
            </el-menu-item>
        </el-sub-menu>
    </el-menu>
</template>

<script>
    import {computed, getCurrentInstance, reactive, toRefs} from "vue";
    import {HomeFilled,Avatar,Setting,List} from '@element-plus/icons'

    export default {
        name: 'AdminMenu',
        components:{
            HomeFilled,Avatar,Setting,List
        },
        setup() {
            const data = reactive({
                isCollapse: false,
            })
            let {proxy} = getCurrentInstance()

            let adminMenus = computed(() => {

                return proxy.$store.state.adminMenus
            })

            let currentPath = computed(() => {
                return proxy.$route.path
            })

            return {
                ...toRefs(data),
                adminMenus,
                currentPath
            }
        }


    }
</script>

<style scoped>
    .el-menu-admin {
        border-radius: 5px;
        height: 100%;
    }
</style>
